<ui:component xmlns="http://www.w3.org/1999/xhtml"
              xmlns:f="http://java.sun.com/jsf/core"
              xmlns:h="http://java.sun.com/jsf/html"
              xmlns:ui="http://java.sun.com/jsf/facelets"
              xmlns:c="http://java.sun.com/jsp/jstl/core">



    <div id="left">
        <div id="profile-info">
            <h2>#{user.name}'s profile</h2>
            <div>
                <h:graphicImage url="#{user.largeGravatar}"/>
            </div>
            <p>
                <strong>E-mail: </strong> #{user.email}<br />
                <strong>Member since: </strong>
            <h:outputText value="#{user.registrationDate}">
                <f:convertDateTime type="date" dateStyle="medium"/>
            </h:outputText>
            </p>
        </div>

        <ui:include src="../WEB-INF/components/followers.xhtml">
            <ui:param name="user" value="#{profileBean.user}"/>
        </ui:include>

    </div>

    <div id="right">
        <h:form id="follow">
            <h3>Follow fucks</h3>
            <h:inputText id="follows" value="#{user.isFollowedBy(sessionScope.user)}" />
            <h:commandButton value="Follow this user" id="follow-user">
                <f:param name="id" value="#{user.id}"/>
                <f:ajax event="click" listener="#{profileBean.follow}" render="follow" />
            </h:commandButton>
            <h:commandButton value="Unfollow this user" id="unfollow-user">
                <f:param name="id" value="#{user.id}"/>
                <f:ajax event="click" listener="#{profileBean.unfollow}" render="follow" />
            </h:commandButton>
            <script type="text/javascript">
                $(document).ready(function() {

                });
            </script>
        </h:form>
    </div>

</ui:component>